<template>
  <view class="share">
    <view class="share-title">分享项目</view>
    <view class="share-content">
      <view class="preview-content">
        <view class="content-title">项目信息</view>
        <view class="share-preview">
          <image class="item-bg" src="/static/image/project-item-bg.png"></image>
          <view class="project-info">
            <arprogress class="rate-box" :activeColor="projectItem.processActiveColor" :borderWidth="8" :width="120" :percent="projectItem.savingRate">
              <view class="rate-text">
                <view class="progress-rate">
                  {{ projectItem.savingRate }}
                  <text class="rate-unit">%</text>
                </view>
                <view class="progress-text">节能率</view>
              </view>
            </arprogress>
            <view class="info-box">
              <view class="name-box">
                <view class="project-name">{{ projectItem.name }}</view>
              </view>
              <view class="location-info">{{ projectItem.locationInfo }}</view>
              <view class="admin-info">
                <view class="admin-name">{{ projectItem.userName }}</view>
                <view class="admin-phone">{{ projectItem.phoneShow }}</view>
              </view>
            </view>
          </view>
          <view class="lamp-info">
            <view class="info-item power-total">
              <view class="item-count">{{ projectItem.totalPower }}</view>
              <view class="item-label">
                累计用电
                <text class="small">(Kwh)</text>
              </view>
            </view>
            <view class="info-item power-saving">
              <view class="item-count">{{ projectItem.savingPower }}</view>
              <view class="item-label">
                累计节电
                <text class="small">(Kwh)</text>
              </view>
            </view>
            <view class="info-item error-count">
              <view class="item-count">{{ projectItem.lampErrorCount }}</view>
              <view class="item-label">故障数</view>
            </view>
            <view class="info-item lamp-count">
              <view class="item-count">{{ projectItem.lampTotalCount }}</view>
              <view class="item-label">灯具数</view>
            </view>
          </view>
        </view>
      </view>
      <view class="btn-box">
        <view class="btn-item cancel" @click="cancel()">取消</view>
        <button class="btn-item share" open-type="share" @click="onShare()">分享</button>
      </view>
    </view>
  </view>
</template>

<script>
import { formatPhone, fixedDecimal, getProjectPermission } from '@/utils/index.js'
import color from '@/envs/_/variables.scss'
import arprogress from '@/components/ar-circle-progress/index.vue'

export default {
  props: {
    projectInfo: {
      type: Object
    }
  },
  components: {
    arprogress
  },
  data() {
    return {
      projectItem: {},
    }
  },
  watch: {
    projectInfo() {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      const self = this
      const projectItem = {
        processInactiveColor: color.successLight,
        processActiveColor: color.success,
        key: self.projectInfo.id,
        projectId: self.projectInfo.id,
        name: self.projectInfo.name || '',
        locationInfo: self.projectInfo.address || '',
        userName: self.projectInfo.projectAdminName || '',
        phoneShow: formatPhone(self.projectInfo.projectAdminPhone),
        totalPower: self.projectInfo.powerTotal,
        savingRate: self.projectInfo.savingRate,
        savingPower: self.projectInfo.powerSaving,
        lampTotalCount: Math.ceil(self.projectInfo._node_count) || 0,
        lampErrorCount: Math.ceil(self.projectInfo._error_count) || 0,
        lampWarningCount: Math.ceil(self.projectInfo._warning_count) || 0,
        online: !!self.projectInfo.online
      }
      if (projectItem.lampWarningCount > 99) {
        projectItem.lampWarningCount = '99+'
      }
      self.projectItem = projectItem
    },
    cancel() {
      this.$emit('close')
    },
    onShare() {
      const self = this
      self.$emit('share')
    }
  }
}
</script>

<style scoped lang="scss">
.share {
  width: 660rpx;
  border-radius: 10rpx;
  background-color: $white;
  overflow: hidden;
}
.share-title {
  font-size: $font-size-5;
  font-weight: bold;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $background-base;
}
.share-content {
  padding: 30rpx 50rpx 60rpx;
}
.preview-content {
  .content-title {
    font-size: $font-size-3;
  }
  .share-preview {
    margin-top: 20rpx;
    position: relative;
    padding: 16rpx 20rpx 20rpx 20rpx;
    background-color: $white;
    border-radius: 10rpx;
    border: 2rpx solid $border-base;
    &.offline {
      filter: grayscale(1) opacity(0.6);
    }
    .item-bg {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
    }
    .project-info {
      position: relative;
      z-index: 2;
      padding-left: 140rpx;
      min-height: 120rpx;
      .rate-box {
        position: absolute;
        left: 0;
        top: 6rpx;
        text-align: center;
        .progress-rate {
          color: $success;
          font-size: $font-size-2;
          .rate-unit {
            font-size: $font-size-0;
          }
        }
        .progress-text {
          font-size: $font-size-0;
        }
      }
      .info-box {
        .name-box {
          position: relative;
          padding-right: 120rpx;
          .project-name {
            font-size: $font-size-4;
            font-weight: bold;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .warning-box {
            position: absolute;
            height: 100%;
            top: 0;
            right: 0;
            text-align: right;
            font-size: $font-size-0;
            color: $warning;
            font-weight: normal;
            display: flex;
            align-items: center;
            .iconfont {
              margin-right: 4rpx;
            }
          }
        }
        .location-info {
          margin-top: 6rpx;
          min-height: 20rpx;
          font-size: $font-size-0;
          color: $text-secondary;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .admin-info {
          margin-top: 6rpx;
          font-size: $font-size-2;
          color: $text-base;
          display: flex;
          .admin-name {
            max-width: 200rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .admin-phone {
            margin-left: 10rpx;
          }
        }
      }
    }
    .lamp-info {
      position: relative;
      z-index: 2;
      margin-top: 12rpx;
      padding: 16rpx;
      border-radius: 10rpx;
      background-color: $background-light;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .info-item {
        text-align: center;
        &.power-saving {
          .item-count {
            color: $success;
          }
        }
        .item-count {
          font-size: $font-size-4;
          font-weight: bold;
        }
        .item-label {
          margin-top: 10rpx;
          font-size: $font-size-0;
          color: $text-secondary;
          .small {
            font-size: $font-size-0;
          }
        }
      }
    }
  }
}
.permission-box {
  margin-top: 50rpx;
  .permission-title {
    font-size: $font-size-3;
    margin-bottom: 10rpx;
  }
}
.btn-box {
  margin-top: 50rpx;
  display: flex;
  justify-content: center;
  .btn-item {
    width: 200rpx;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rpx;
    font-size: $font-size-4;
    &.cancel {
      color: $text-secondary;
      background-color: $border-lighter;
    }
    &.share {
      margin: 0 0 0 40rpx;
      color: $white;
      background-color: $primary;
    }
  }
}
</style>
